﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <title>Index</title>
    <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.easyui.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
    <link href="@Url.Content("~/Content/easyUI/themes/gray/easyui.css")"  type="text/css" rel="Stylesheet"/>
    <link href="@Url.Content("~/Content/easyUI/themes/icon.css")" type="text/css" rel="Stylesheet" />
    <script type="text/javascript">
        
        $(function () {
            initList();

            $("#addUserInfoDiv").css("display", "none");
            $("#editUserInfoDiv").css("display", "none");
        });
        function initList() {
            $('#tt').datagrid({
                url: "/UserInfo/LoadAllUserInfo",
                title: '用户信息表',
                fitColumns: true, //自适应列
                idField: 'ID', //ID字段
                pageSize: 10, //单页数据行数
                pagination: true, //设置是否分页，如果为true，将会在datagrid底部生成pagination bar，将会向服务器发送两个参数：page（页码），rows（每页行数）
                columns: [[
                    { field: 'ck', checkbox: true, align: 'left' }, //多选框的列
					{field: 'ID', title: '编号' },
                    { field: 'UserName', title: 'UserName' },
                    { field: 'Address', title: 'Address' },
                    { field: 'Age', title: 'Age' },
                    { field: 'Email', title: 'Email Details' }
                 ]],
                //工具栏，'-'表示分隔符
                toolbar: [{
                    text: '编辑',
                    iconCls: 'icon-edit',
                    handler: function () { editUserinfo(); }
                }, '-', {
                    text: '添加',
                    iconCls: 'icon-add',
                    handler: function () { addUserInfo(); }
                }, '-', {
                    text: "删除",
                    iconCls: 'icon-remove',
                    handler: function () {
                        deleteUserInfo();
                    }
                }]

            });
        }

        function addUserInfo() {
            var addUserInfoDiv=$("#addUserInfoDiv");
            addUserInfoDiv.css("display", "block");
            addUserInfoDiv.dialog({
                title: '添加用户',

                resizable: true,
                buttons: [{
                    text: '添加',
                    iconCls: 'icon-ok',
                    handler: function () {
                        $("#ajaxUserAddFrm").submit();
                    }

                }, { text: '取消',
                    handler: function () {
                        $("#addUserInfoDiv").dialog('close');
                    }
                }]

            });
        }
        function editUserinfo() {
            var rows = $('#tt').datagrid('getSelections');
            var len = rows.length;
            if (len == 1) {
                var row = rows[0];
                var ID = row.ID;

                $("#editUserInfoFrame").attr("src", "/UserInfo/Edit/" + ID);
                var editUserInfoDiv = $("#editUserInfoDiv");
                editUserInfoDiv.css("display", "block"); 
                editUserInfoDiv.dialog({
                    title: '修改用户信息',
                    resizable: true,
                    buttons: [{
                        text: '确定',
                        iconCls: 'icon-ok',
                        handler: function () {
                            //获取frame标签的一个window对象
                            var childWindow = $("#editUserInfoFrame")[0].contentWindow; 
                            //调用frame中的方法
                            childWindow.submitEditFrm();
                        }

                    }, { text: '取消',
                        handler: function () {
                            $("#editUserInfoDiv").dialog('close');
                        }
                    }]

                });

            } else {
                alert("请选择一行数据");
                return false;
            }
        }
        function afterAdd() {
            var text = $("#IsAddOK_hidden").text();
            if (text=="true") {
                $("#addUserInfoDiv").dialog('close');
                initList();
            } else {
                $.messager.alert("添加用户失败！");
            }
        }
        //由子frame调用
        function afterEdit() {
            $("#editUserInfoDiv").dialog('close');
            initList();
        }

        function deleteUserInfo() {
            //获取已选择的行
            var rows = $("#tt").datagrid('getSelections');
            var length = rows.length;
            var params="";
            for (var i = 0; i < length; i++) {
                params += rows[i].ID + ',';
            }
            params=params.substr(0, params.length - 1);
            if (length > 0) {
                if (confirm('确定删除？') == true) {
                    $.post('/UserInfo/Delete', "IDs=" + params, function (data) {
                        if (data == "true") {
                            //清除已选择的行，否则删除后再次删除的时候还会提交以前选择的行ID
                            $("#tt").datagrid('clearSelections');
                            initList();
                        }
                    }, 'text');
                }
                
            } else {
                alert('至少选择一行数据！');
            }
        }
    </script>

</head>
<body>
    @*datagrid*@
    <div>
        <table id="tt" style="width: 600px; height: 480px" >
            
        </table>
    </div>

    
    <div id="addUserInfoDiv">
        @{ 
            //需要引入js—— jquery.unobtrusive-ajax
            //由addUserInfoDiv的方法 addUserInfo 进行数据的提交
            using (Ajax.BeginForm("AddUser","UserInfo",new {},
                new AjaxOptions() { HttpMethod = "post", OnSuccess = "afterAdd", UpdateTargetId = "IsAddOK_hidden" }, new { id = "ajaxUserAddFrm" }))
            {
                <table style="text-align: center">
                    <tr><td>用户名</td> <td><input type="text" name="UserName" /></td></tr>
                    <tr><td>密 码</td> <td><input type="text" name="UPwd" /></td></tr>
                    <tr><td>年 龄</td> <td><input type="text" name="Age" /></td></tr>
                    <tr><td>地 址</td> <td><input type="text" name="Address" /> </td></tr>
                    <tr><td>Email</td> <td><input type="text" name="Email" /> </td></tr>
                </table>
            }    
        }
    </div>

    <input type="hidden" id="IsAddOK_hidden" value="false"/>

    <div id="editUserInfoDiv">
        <iframe id="editUserInfoFrame" width=360px height=400px></iframe>
    </div>
@*   <table id="tt" class="easyui-datagrid" style="width: 600px; height: 480px""  
            url="/UserInfo/LoadAllUserInfo"  
            title="Load Data" iconCls="icon-save"  
            rownumbers="true" pagination="true" toolbar="#tb">  
            <thead>
                <tr>  
                    <th field="UserName" width="80">UserName</th>  
                    <th field="Address" width="80">Address</th>  
                    <th field="Age" width="80" align="right">Age</th>  
                    <th field="Email" width="80" align="right">Email</th>  
                </tr>  
            </thead>
    </table> 

    <div id="tb">  
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="javascript:alert('Add')">添加</a>  
        <a href="#" class="easyui-linkbutton" iconCls="icon-cut" plain="true" onclick="javascript:alert('Cut')">剪切</a>  
        <a href="#" class="easyui-linkbutton" iconCls="icon-save" plain="true" onclick="javascript:alert('Save')">保存</a>  
    </div>  *@
</body>
</html>
